<template>
	<view class="personalInfo  ">

		<view class="personalBox bgWhite radius8">
			<uv-form labelPosition="left" :model="personaModel" :rules="personalRules" :labelStyle="labelStyle"
				ref="form">
				<uv-form-item  label="推荐人姓名" borderBottom labelWidth="180rpx">
					<uv-input :disabled="type=='2'" inputAlign="right" v-model="personaModel.tuijian_name" border="none" placeholder="请输入">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="推荐人手机号" borderBottom labelWidth="190rpx">
					<uv-input  :disabled="type=='2'" inputAlign="right" v-model="personaModel.tuiian_mobile" border="none" placeholder="请输入">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="真实姓名" borderBottom labelWidth="140rpx">
					<uv-input inputAlign="right" v-model="personaModel.realname" border="none" placeholder="请输入">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="身份证号" borderBottom labelWidth="140rpx">
					<uv-input inputAlign="right" v-model="personaModel.idcode" border="none" placeholder="请输入">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="手机号" borderBottom labelWidth="140rpx">
					<uv-input inputAlign="right" v-model="personaModel.mobile" border="none" placeholder="请输入">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="住址" borderBottom labelWidth="140rpx">
					<uv-input inputAlign="right" v-model="personaModel.address" border="none" placeholder="请输入">
					</uv-input>
				</uv-form-item>
				
				<uv-form-item label="网红名称" borderBottom labelWidth="140rpx">
					<uv-input inputAlign="right" v-model="personaModel.wanghong" border="none" placeholder="请输入">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="粉丝" borderBottom labelWidth="140rpx">
					<uv-input inputAlign="right" v-model="personaModel.fensi" border="none" placeholder="请输入">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="所在平台" borderBottom labelWidth="140rpx">
					
					<uv-checkbox-group v-model="checkboxValue" placement="row">
								<uv-checkbox :custom-style="{margin:'8px'}" v-for="(item,index) in pingtailist" :name="item.name" :label="item.name"></uv-checkbox>
								
							</uv-checkbox-group>
				</uv-form-item>
				

				
				
				<uv-form-item label="一个月流水" borderBottom labelWidth="180rpx">
					<uv-input :disabled="type=='2'" inputAlign="right" v-model="personaModel.zijin" border="none"
						:placeholderStyle="'fontSize:12px'"
						:customStyle="'fontSize:12px'"
						placeholderClass="placeholderClass"
						placeholder="若为新人网红，应自己预估个人单月流水">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="是否由公司代缴个人所得税" borderBottom labelWidth="230rpx">
					<view class="justify-between">
							<uv-radio-group :disabled="type=='2'" v-model="radiovalue" @change="changeRadio" placement="row">
									<uv-radio :customStyle="{marginLeft: '8px'}" name="1" label="是"></uv-radio>
									<uv-radio 			:customStyle="{marginLeft: '8px'}"  name="2" activeColor="red" label="否"></uv-radio>
								</uv-radio-group>
							<view class="" @click="shownoticePop">
								<uv-icon name="info-circle"></uv-icon>
							</view>	
					</view>
				
				</uv-form-item>
				
				<uv-form-item label="个人所得税" borderBottom labelWidth="190rpx">
					<view style="text-align: right;" v-if="radiovalue==2">0</view>
					<uv-input :disabled="type=='2'" v-else  inputAlign="right" v-model="personaModel.shuikuan" border="none"
						placeholder="请输入">
					</uv-input>
				</uv-form-item>
			<!-- 	<uv-form-item label="个人所得税" borderBottom labelWidth="140rpx">
					<uv-input inputAlign="right" v-model="personaModel.shuikuan" border="none" placeholder="请输入">
					</uv-input>
				</uv-form-item> -->
				<uv-form-item label="个人简介" labelPosition="top" labelWidth="140rpx">
					<uv-textarea v-model="personaModel.jieshao" placeholder="请输入"></uv-textarea>
				</uv-form-item>
				<uv-form-item label="个人历史业绩" labelPosition="top" labelWidth="200rpx">
					<uv-textarea v-model="personaModel.yeji" placeholder="比如历史销售流水为**"></uv-textarea>
				</uv-form-item>

			</uv-form>
		</view>
		<view class="personalBox bgWhite radius8 mt12">
			<uv-form-item label="上传身份证" labelPosition="top" labelWidth="160rpx">
				<view class="justify-between align-center mt15">
					<view class="posRelative " @click="upload(1)">
						<image v-if="personaModel.sfz1" style="width: ;" :src="personaModel.sfz1" mode=""></image>
						<image v-else src="../../static/images/1.jpg" class="radius5" mode="widthFix"></image>
						<view class="posAbsort textbox">
							上传身份证正面照片
						</view>
					</view>
					<view class="posRelative" @click="upload(2)">
						<image v-if="personaModel.sfz2" :src="personaModel.sfz2" mode=""></image>

						<image v-else src="../../static/images/2.jpg" class="radius5" mode="widthFix"></image>
						<view class="posAbsort textbox">
							上传身份证反面照片
						</view>
					</view>
				</view>
			</uv-form-item>
			<!-- <view class="">
				<view class="moneydesc">
					近三个月流水截图 <text>请上传最近三个月流水截图</text>
				</view>
				<view class="align-center flex-wrap justify-start">
					<view class="mr10 mt5 posRelative" v-for="(i,n) in imgList" :key="n">
						<image style="width: 180rpx;height: 180rpx;border-radius: 15rpx;" :src="i" mode=""></image>
						<view @click="del(n)" class="posAbsort" style="right: 10rpx;top: 10rpx">
							<uv-icon name="close-circle"></uv-icon>
						</view>
					</view>
				</view>
				<view v-if="imgList.length<6" class="plus align-center justify-center" @click="upload(3)">
					<uv-icon color="#B0B0B0" size="25" name="plus"></uv-icon>
				</view>
			</view> -->
		</view>

		<!-- <view v-if="!personaModel.id" class="xy align-center justify-center mt10">
			<uv-checkbox-group v-model="checked" @change="changeCheck">
				<uv-checkbox shape="circle" activeColor="#49806F" name="apple" label="">
					<template #default>
						<view class="align-center justify-center ft13" style="color: #999;">
							阅读并签署<text @click.stop="toxy(2)" style="color: #49806F;">《网签合同》</text>
						</view>
					</template>
				</uv-checkbox>
			</uv-checkbox-group>
		</view> -->
		<view class="save_btn" v-if="type!='1'" @click="save">
			提交

		</view>
		<uv-popup ref="modal" :bgColor="none" :showConfirmButton="false">
			<view class="successBox align-center justify-center flex-col">
				<image src="../../static/images/success.png" mode="widthFix"></image>
				<view class="success">
					注册成功
				</view>
				<view class="desc">
					请阅读并签署<text style="color: #49806F;">《网签合同》</text>协议
				</view>
				<view class="confirm" @click="toindex">
					去签署
				</view>

			</view>
		</uv-popup>
		<uv-popup ref="modals" :bgColor="none" :showConfirmButton="false" :close-on-click-overlay="false">
			<view class="successBox align-center justify-center flex-col">
				<image src="../../static/images/success.png" mode="widthFix"></image>
				<view class="success">
					未签署网签协议
				</view>
				<view class="desc">
					请阅读并签署<text style="color: #49806F;">《网签合同》</text>协议
				</view>
				<view class="confirm" @click="toindex">
					去签署
				</view>
		
			</view>
		</uv-popup>
		<uv-popup ref="noticePop" mode="center" :bgColor="'#fff'" round="10" :showConfirmButton="false" :close-on-click-overlay="true">
			<view class="" style="height: 60vh;padding: 30rpx 15rpx;overflow: scroll;">
					<view class="justify-between align-center" style="width: 700rpx;margin: 0 auto;">
						<view class="flex1" style="font-weight: 600; font-size: 40rpx;text-align: center;">
							个人所得税说明
						</view>
						<uv-icon name="close-circle" @click="closePop"></uv-icon>
					</view>
					<view style="width: 700rpx;margin: 20rpx auto -40rpx;">
						<br/>
						缴纳个人所得税是每位公民应尽的义务，
						<br />
						个人所得税可以自行缴纳或选择公司直接代为缴纳；
							<br />
						网红可以选择是否由公司代缴个人所得税。
							<br />
						选择公司代缴后，公司代替网红进行个人所得税缴纳，
							<br />
						同时相应提高网红付款能力；若不选择公司代缴，不影响小程序正常使用。
						<br />
						与本公司签约分成比为9:1
					</view>
					<view class="tablebox" style="width: 120vw;overflow: hidden;margin:  0 20rpx;transform:scale(0.8)">
						<view class="w20" style="width: 20%;height: auto;" >
							<view class="" style="height: 200rpx;">
								网红个人月收入t(元)
							</view>
							<view class="">
								不超过 8,000
							</view>
							<view class="">
								8,000 - 17,000
							</view>
							<view class="">
								17,000 - 30,000
							</view>
							<view class="">
								30,000 - 40,000
							</view>
							<view class="">
								40,000 - 60,000
							</view>
							<view class="">
								60,000 - 85,000
							</view>
							<view class="">
								超过 85,000
							</view>
						</view>
						<view class="w30" style="width: 35%;height: auto;">
							<view class="" style="height: 200rpx;">
								网红个人月应征税x（元）
								
								<text>（已扣除5000免征税）</text>
							</view>
							<view class="">
								x=t-5000
							</view>
						</view>
						<view class="w10" style="width: 15%;height: auto;">
							<view class="" style="height: 200rpx;">
								税率k（%）
							</view>
							<view class="">
								3
							</view>
							<view class="">
								10
							</view>
							<view class="">
								20
							</view>
							<view class="">
							25
							</view>
							<view class="">
								30
							</view>
							<view class="">
								35
							</view>
							<view class="">
								45
							</view>
						</view>
						<view class="w15" style="width: 15%;height: auto;">
							<view class="" style="height: 200rpx;">
							速算扣除数c（元）
							</view>
							<view class="">
								0	
							</view>
							<view class="">
								210
							</view>
							<view class="">
								1,410
							</view>
							<view class="">
							2,660
							</view>
							<view class="">
								4,410
							</view>
							<view class="">
								7,160
							</view>
							<view class="">
								15,160
							</view>
						</view>
						<view class="w10" style="width: 15%;height: auto;">
							<view class="" style="height: 200rpx;">
								个人所得税
								
							</view>
							<view class="">
								W=x*k-c
							</view>
						</view>
						<!-- <view class="w15" style="width: 18%;height: auto;">
							<view class="" style="height: 200rpx;">
								季度个人所得税
								
							</view>
							<view class="">
							Y=W1+W2+W3
							</view>
						</view> -->
					</view>
					<view class="ft12" style="width: 700rpx;margin: 0 auto 30rpx;">
						其中5000元为国家免征额,速算扣除数=前一级距最高应纳税所得额×前一级距税率+前一级距速算扣除数,
						速算扣除数的作用是简化税额的计算,W1、W2、W3 为一个季度中缴纳三个月的个人所得税
						
					</view>

			</view>
		</uv-popup>
		<uv-picker ref="areaPicker" :columns="areaRrand" keyName="name" @change="carChange"
			@confirm="areaConfirm"></uv-picker>
	</view>
</template>

<script>
	import operate from '@/common/operate.js'
	export default {
		data() {
			return {
				labelStyle: {
					'height': '87rpx',
					'font-size': "30rpx",
					'color': '#000'
				},
				personaModel: {
					wanghong: "",
					pingtai: "",
					realname: "",
					shuikuan:"",
					fensi: "",
					mobile: "",
					sfz1: "",
					sfz2: "",
					tuijian_name: "",
					tuiian_mobile: "",
					liushui: "",
					zijin: "",
					jieshao: "",
					address: "",
					idcode: "",
					yeji:""

				},
				personalRules: {},
				areaRrand: [
					[],
					[]
				],
				columnData: [],
				area: "",
				checkboxValue: [],
				cateList: [],
				checked: [],
				imgList: [],
				loading: false,
				signed: false,
				type: "",
				radiovalue:"1",
				richdata:"",
				pingtailist:[]
			};
		},
		onReady() {

		},
		onBackPress() {
			uni.switchTab({
				url: '/pages/tabbar/mine'
			})
			return true
		},
		onLoad(opt) {
			this.$api.userIndex().then(res => {
				this.personaModel.mobile = res.data?.user_info?.mobile
			})
			this.$api.wanghongpingtai().then(res => {
				console.log(res)
			this.pingtailist =res.data
			})
			
			if (opt.type) this.type = opt.type
			this.signed = false
			this.$api.wanghonginfo().then(res => {
				console.log(res)
				if (res.data) {
					if(res.data.id){
						this.personaModel = res.data
						// this.imgList = res.data.liushui.split(',')
						if(!this.personaModel.dianzihetong){
							this.$refs.modals.open()
						}
						this.personaModel.tuiian_mobile = res.data.tuiian_mobile
						this.personaModel.tuijian_name = res.data.tuijian_name
						this.checkboxValue=this.personaModel.pingtai.split(',')
						
					}else{
						this.personaModel.tuiian_mobile = res.data.mobile
						this.personaModel.tuijian_name = res.data.name
						
					}
					
						
					
				}

			})
			//   if(!uni.getStorageSync('userId'))return uni.reLaunch({
			//       url:'/pages/login/login'
			//   })
			//   this.personaModel.user_id = uni.getStorageSync('userId')
			//   this.getCate()
			this.$api.richtext().then(res=>{
				console.log(res)
				this.richdata= res.data
			})

		},
		mounted() {
			let vm = this
			uni.$on('signSuccess', function() {
				
				vm.$refs.modal.close()
				vm.$refs.modals.close()
					vm.$utils.msg('签署成功')
				setTimeout(()=>{
					uni.switchTab({
						url:'/pages/tabbar/mine'
					})
				},500)
				
				
			})
		},
		methods: {
			closePop(){
				this.$refs.noticePop.close()
			},
			changeRadio(){
				this.personaModel.shuikuan=0
			},
			shownoticePop(){
				this.$refs.noticePop.open()
			},
			del(n) {
				this.imgList.splice(n, 1)
			},
			toxy() {
				uni.navigateTo({
					url: '/pages/signAbout/index?type=1'
				})
			},
			changeCheck(val) {
				this.checked = val
			},
			checkCity(type) {

				this.$refs.areaPicker.open()
			},
			upload(type) {
				let vm = this
				if (this.type=='2') return
				uni.chooseImage({
					sourceType: ['album'],
					count: type==3?6-vm.imgList.length:1,
					success: function(res) {
						console.log(res)
						res.tempFilePaths.map(item => {
							vm.$api.uploadImg({
								filePath: item
							}).then(res => {
								switch (type) {
									case 1:
										vm.personaModel.sfz1 = res.data.fullurl
										break;
									case 2:
										vm.personaModel.sfz2 = res.data.fullurl
										break;
									case 3:
										vm.imgList.push(res.data.fullurl)
										break;
								}
							})
						})
					}
				})
			},

			async save() {
				let vm = this
				// if (!vm.personaModel.realname) return vm.$utils.msg('请输入真实姓名')
				// if (!vm.personaModel.nickname) return vm.$utils.msg('请输入艺名')
				// if (!vm.personaModel.category_id) return vm.$utils.msg('请选择您的艺术类别')
				if (!vm.personaModel.realname) return vm.$utils.msg('请输入真实姓名')
				if (!vm.personaModel.idcode) return vm.$utils.msg('请输入身份证号')
				if (!vm.personaModel.mobile) return vm.$utils.msg('请输入手机号')
				if (!vm.personaModel.address) return vm.$utils.msg('请输入地址')
				if (!vm.personaModel.wanghong) return vm.$utils.msg('请输入网红名称')
				if (!vm.checkboxValue.length) return vm.$utils.msg('请至少选择一项平台')
				if (!vm.personaModel.fensi) return vm.$utils.msg('请输入粉丝')
		
				if (!vm.personaModel.tuijian_name) return vm.$utils.msg('请输入推荐人姓名')
				if (!vm.personaModel.tuiian_mobile) return vm.$utils.msg('请输入推荐人手机号')
				if (vm.radiovalue=='1'&&!vm.personaModel.shuikuan) return vm.$utils.msg('请输入一个月个人所得税')
				if (!vm.personaModel.sfz1) return vm.$utils.msg('请上传身份证正面图片')
				if (!vm.personaModel.sfz2) return vm.$utils.msg('请上传身份证反面图片')
				
				
				// if (!vm.imgList.length) return vm.$utils.msg('请上传流水截图')
				// if(!this.signed&&!vm.personaModel.id) return vm.$utils.msg('请阅读并签署线上协议')
				vm.personaModel.pingtai = vm.checkboxValue.join(',')
				if (vm.loading) return
				vm.loading = true
				// vm.personaModel.liushui = vm.imgList.join(',')
				uni.showLoading({})
				vm.$api.addwanghong(vm.personaModel).then(res => {
					vm.loading = false
					uni.hideLoading()
					if (res.code == 1) {
						// vm.$utils.msg(res.msg)
						if (!vm.personaModel.id) {
							vm.$refs.modal.open()

						} else {
							vm.$utils.msg('修改成功')
							setTimeout(() => {
								uni.navigateBack()
							}, 800)
						}


					} else {
						vm.$utils.msg(res.msg)
					}
				})
			},

			getPhoneNumber(e) {
				console.log(e)
			},
			toindex() {
				uni.navigateTo({
					url: `/pages/signAbout/index?type=1&name=${this.personaModel.realname}&sfz=${this.personaModel.idcode}&zhusuo=${this.personaModel.address}&mobie=${this.personaModel.mobile}`
				})
				// uni.switchTab({
				// 	url:'/pages/tabbar/mine'
				// })
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.header {
		margin-top: 52rpx;
		margin-bottom: 40rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #000000;
		line-height: 36rpx;

	}

	.personalInfo {

		padding: 22rpx;
		position: relative;

		.personalBox {
			padding: 0 32rpx 40rpx;

		}

		.save_btn {
			width: 100%;
			height: 90rpx;
			margin-top: 38rpx;
			margin-bottom: 40rpx;
			background: #49806F;
			border-radius: 12rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 90rpx;
		}

	}

	button {
		color: #303133;
		font-size: 28rpx;
		text-align: left;
	}

	image {
		width: 300rpx;
		border-radius: 12rpx;
		height: 200rpx;

	}

	.textbox {
		width: 300rpx;
		height: 51rpx;
		background: #DFC199;
		border-radius: 0 0 10rpx 10rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 51rpx;
		bottom: 0;
		left: 0;
	}

	.plus {
		width: 200rpx;
		height: 200rpx;
		background: #F5F5F7;
		border-radius: 15rpx;
	}

	.moneydesc {
		font-size: 30rpx;
		color: #333;
		margin: 50rpx 0 26rpx;

		text {
			font-size: 22rpx;
			color: #999999
		}
	}

	.successBox {
		width: 631rpx;
		height: 500rpx;
		background: linear-gradient(0deg, #D2E6C4, #7AB588);
		border-radius: 28rpx;
		font-size: 32rpx;
		color: #111111;

		image {
			width: 120rpx;
		}

		.success {
			font-weight: bold;

			margin: 38rpx 0;
		}

		.confirm {
			width: 193rpx;
			height: 72rpx;
			background: linear-gradient(0deg, #BEDDB5, #7FB98C);
			box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(11, 26, 20, 0.35);
			border-radius: 36rpx;
			color: #003E22;
			font-weight: bold;
			margin-top: 50rpx;
			line-height: 72rpx;
			text-align: center;
		}
	}

	/deep/.uv-textarea {
		border: none !important;
	}
	.tablebox{
		white-space: pre-wrap;
		display: flex;
		font-size: 20rpx;
		view{
			border-top: 2rpx solid #f5f5f5;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			border-left:2rpx solid #f5f5f5 ;
		}
	}
	/deep/.placeholderClass{
		font-size: 12px;
	}
</style>